<template>
  <div>
    <a-list :bordered="true"
            :dataSource="intentDeviceSource"
            itemLayout="horizontal">
      <a-list-item slot="renderItem" slot-scope="record, index" style="display:inline-flex;">
        <a-card hoverable style="width:340px;">
          <a-card-meta :title="record.instanceName">
            <template slot="description" :slot-scope="record">
              <div :style="'border-top: 2px solid '+(record.instanceStatus==='online'?'green':'red')"></div>
            </template>
            <a-avatar
              slot="avatar"
              :src="getImgView(record.icon)"
            />
          </a-card-meta>
          <a-divider type="horizontal" />
          <template>
            <a-row v-for="param in record.functionParams" :key="param.id">
              <a-col :span="10"><p>{{param.paramName}}：</p></a-col>
              <a-col :span="14">{{ param.paramValue }}</a-col>
            </a-row>
          </template>

        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import {deleteAction, getAction} from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'

export default {
  name: 'serviceManager',
  mixins: [JeecgListMixin],
  components: {
  },
  data() {
    return {
      description: '联网设备',
      columns: [],
      serviceTypeOptions: [],
      stateLoading: false,
      url: {
        list: '/device/instance/listInternetDevice',
        getServiceType: '/network/manage/getServiceType',
      },
      intentDeviceSource: [],
      dictOptions: {}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domainURL']}/${this.url.importExcelUrl}`
    }
  },
  mounted() {
  },
  methods: {
    loadData() {
      let that = this
      this.loading = true
      getAction(this.url.list, ).then((res) => {
        if (res.success) {
          that.intentDeviceSource = res.result
        }
        if (res.code === 510) {
          that.$message.warning(res.message)
        }
        that.loading = false
        that.stateLoading = false
      })
    },
    initDictConfig() {
    }
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
